<template>
	<view>
		<status-bar ref='statusbar' :title='title' back='1'></status-bar>
		<view class="nav" v-if="list1.length">
			<u-tabs :list="list1" @click="click" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle"
				:lineWidth="40" :lineColor="color" :current="current"></u-tabs>
		</view>
		<view class="rows p-top100" v-if="list1.length"></view>
		<block v-for="(item,index) in pageData" :key="index">
			<biList v-if="item.learn_end_time" :pageData="item"></biList>
			<xuanList v-else :pageData="item"></xuanList>	
		</block>
		<emptys v-if="!pageData.length" title="暂无相关信息~"></emptys>	
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import biList from './components/study/biList.vue'
	import xuanList from './components/study/xuanList.vue'
	export default {
		components: {
			biList,
			xuanList
		},
		data() {
			return {
				title:'',
				page:1,
				pageNum:10,
				getMore:true,
				list1: [],
				itemStyle: {
					height: '70rpx'
				},
				current: 0,
				classify_id:'',
				
				pageData:[],
			}
		},
		onLoad(option) {
			if(option.id) this.classify_id = option.id;
			this.goodsList();
		},
		methods: {
			goodsList() {
				this.$http.post({
					url: '/singleSaleApi/goodsList',
					data:{
						classify_id:this.classify_id
					}
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg);
					const result = res.data || [];
					this.title = result.classify_name;
					if(result.list && result.list.length){
						this.classify_id = result.list[0].id;
						this.list1 = result.list;
					}
					this.sortClassGoods()
				})
			},
			sortClassGoods(){
				this.$http.post({
					url:'/singleSaleApi/sortClassGoods',
					data:{
						classify_id:this.classify_id,
						page:this.page,
						pageNum:this.pageNum,
					}
				}).then(res=>{
					if(res.code != 100) return this.$Toast();
					const result = res.data?res.data.DataArr:[];
					console.log(result,'result');
					this.page == 1?this.pageData = result:this.pageData = this.pageData.concat(result);
					if(!result.length) return this.getMore = false;
				})
			},
			click(e) {
				this.page = 1;
				this.getMore = true;
				this.current = e.index;
				this.classify_id = e.id;
				this.sortClassGoods()
			}
		},
		onReachBottom() {
			if(!this.getMore) return;
			this.page++;
			this.sortClassGoods()
		},
		computed: {
			...mapState(['inactiveStyle', 'activeStyle', 'color'])
		}
	}
</script>

<style lang="scss" scoped>
	// #ifdef MP-WEIXIN
	.nav {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

	// #endif
	// #ifdef H5
	.nav {
		width: 100%;
		height: 100rpx;
		position: fixed;
		top: 40px;
		left: 0;
		z-index: 100;
		background-color: #ffffff;
	}

	// #endif
</style>